<!--头部统计  -->
<template>
	<div class="table" id="Relationship" ref="Relationship"></div>
</template>

<script>
import border from '../border.vue';
import StatisticsMixins from '../../StatisticsMixins';
import { bigScreenApi } from '@/api/index';
import * as echarts from 'echarts';
let basicData = [
	{
		name: '数据中心1',
		symbol: 'image://' + require('@/assets/img/center.png'),
		symbolSize: [10, 10],
		value: [200, 250],

		label: {
			show: false,
			position: ['50%', '50%']
		}
	},
	{
		name: '数据中心',
		symbol: 'image://' + require('@/assets/img/center.png'),
		symbolSize: [400, 280],
		value: [200, 150],

		label: {
			show: false,
			position: ['50%', '50%']
		}
	}
];
let basicForm = {
	symbol: 'image://' + require('@/assets/img/house.png'),
	symbolSize: [100, 100],
	label: {
		show: false,
		position: ['-50%', '-50%']
	}
};
export default {
	components: { border },
	mixins: [StatisticsMixins],
	// components: { ScrollNumber },
	data() {
		return {
			dateTime: '',
			level: 0,
			areaList: [],
			data: [],

			option: {
				// backgroundColor: '#000',
				xAxis: {
					show: false,
					type: 'value'
				},
				yAxis: {
					show: false,
					type: 'value'
				},
				tooltip: {
					show: false
				},
				grid: {
					left: '10%',
					right: '10%',
					top: '10%',
					bottom: '15%',
					containLabel: true
				},
				series: [
					{
						type: 'graph',
						zlevel: 5,
						draggable: false,
						coordinateSystem: 'cartesian2d', //使用二维的直角坐标系（也称笛卡尔坐标系）
						label: {
							show: false,
							padding: [10, 20],
							color: '#fff',
							backgroundColor: {
								image: ''
							},
							// borderColor: '#aee9fb',
							// borderWidth: 1,
							borderRadius: 6,
							position: ['-100%', '100%'],
							formatter(params) {
								// console.log(params);
								if (params.name == '数据中心' || params.name == '数据中心1') {
									return '';
								} else {
									return `{a|${params.name}}\n\n{b|存栏量:}         {hr|} {c| ${params.value[2]}} {d| 头}\n\n{b|平均日龄:}     {hr|} {c| ${params.value[3]}} {d|天}`;
								}
							},
							textStyle: {
								align: 'left',
								lineHeight: 20
							},

							//     formatter: function(params) {

							// },
							rich: {
								a: { color: '#fff', fontSize: '17', lineHeight: '17' },
								b: {
									color: '#96a1b7',
									fontSize: '15',
									lineHeight: '15'
								},
								c: {
									color: '#fff',
									fontSize: '20',
									fontWeight: 'bold',
									lineHeight: '20'
								},
								d: {
									color: '#96a1b7',
									fontSize: '12',
									lineHeight: '12'
								},
								hr: {
									borderColor: '#FFFFFF',
									width: '1',
									borderWidth: '1',
									height: '15'
								}
							}
						},
						data: [],
						links: [
							{
								source: '数据中心',
								target: '分数据中心一'
							},
							{
								source: '数据中心',
								target: '分数据中心二'
							},
							{
								source: '数据中心',
								target: '分数据中心三'
							},
							{
								source: '数据中心',
								target: '分数据中心三1'
							},
							{
								source: '数据中心',
								target: '分数据中心三12'
							}
						],
						lineStyle: {
							normal: {
								opacity: 1,
								color: '#53B5EA',
								curveness: 0.2,
								width: 2
							}
						}
					}
				]
			},
			bankchat: null,
			timer: null
		};
	},
	props: {
		deptId: {
			type: [String, Number],
			default: 0
		}
	},
	watch: {
		deptId: {
			handler(newV, oldV) {
				setTimeout(() => {
					this.getInfo();
				}, 500);
			},
			immediate: true
		}
	},
	mounted() {
		// this.getInfo();
	},
	destroyed() {
		clearInterval(this.timer);
	},
	methods: {
		getInfo() {
			clearInterval(this.timer);

			console.log(document.getElementById('Relationship'));
			this.bankchat = echarts.init(document.getElementById('Relationship'));

			let linedata = [];

			let two = [
				[0, 0],
				[400, 0]
			];
			let three = [
				[0, 100],
				[200, 0],
				[400, 100]
			];
			let four = [
				[0, 100],
				[100, 0],
				[300, 0],
				[400, 100]
			];
			let five = [
				[0, 100],
				[100, 50],
				[200, 0],
				[300, 50],
				[400, 100]
			];
			let links = [];
			this.$postAction(bigScreenApi.succahInfoCount + '?deptId=' + this.deptId).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;
					console.log('///////////', cowData.length);
					this.data = [...basicData, ...cowData];
					if (cowData.length > 1) {
						// 定义一个变量，记录当前 label 要显示的节点索引
						let currentIndex = 1;

						// 每隔 3 秒修改一次 label 的显示内容
						this.timer = setInterval(() => {
							if (currentIndex < this.option.series[0].data.length - 1) {
								// 计算出下一个要显示的节点
								currentIndex = currentIndex + 1;
								console.log(currentIndex);
								// 获取当前 option 对象
								const currentOption = this.bankchat.getOption();
								// 根据当前节点索引更新 label 显示的内容
								currentOption.series[0].data.forEach((item, index) => {
									if (index === currentIndex) {
										// 当前节点，显示完整信息
										item.label.show = true;
									} else {
										// 其他节点只显示名称
										item.label.show = false;
									}
								});
								// 更新 option 对象
								this.bankchat.setOption(currentOption);
							} else {
								currentIndex = 1;
							}
						}, 3000);
					}
					if (cowData.length == 1) {
						// 定义一个变量，记录当前 label 要显示的节点索引
						let currentIndex = 1;

						// 每隔 3 秒修改一次 label 的显示内容
						this.timer = setInterval(() => {
							if (currentIndex < this.option.series[0].data.length - 1) {
								// 计算出下一个要显示的节点
								currentIndex = currentIndex + 1;
								// console.log(currentIndex);
								// 获取当前 option 对象
								const currentOption = this.bankchat.getOption();
								// 根据当前节点索引更新 label 显示的内容
								currentOption.series[0].data.forEach((item, index) => {
									if (index === currentIndex) {
										// 当前节点，显示完整信息
										item.label.show = true;
									} else {
										// 其他节点只显示名称
										item.label.show = false;
									}
								});
								// 更新 option 对象
								this.bankchat.setOption(currentOption);
							} else {
								currentIndex = 1;
							}
						}, 3000);
					}
					if (cowData.length == 0) {
						let ondata = [
							{
								name: '数据中心1',
								symbol: 'image://' + require('@/assets/img/center.png'),
								symbolSize: [1, 1],
								value: [200, 200],

								label: {
									show: false,
									position: ['50%', '50%']
								}
							},
							{
								name: '数据中心',
								symbol: 'image://' + require('@/assets/img/center.png'),
								symbolSize: [400, 280],
								value: [200, 100],

								label: {
									show: false,
									position: ['50%', '50%']
								}
							},
							{
								name: '数据中心11',
								symbol: 'image://' + require('@/assets/img/center.png'),
								symbolSize: [1, 1],
								value: [400, 150],

								label: {
									show: false,
									position: ['50%', '50%']
								}
							}
						];
						clearInterval(this.timer);
						// ondata.forEach((item, index) => {
						// 	if (index != 0 && index != 1index != 0 && index != 1) {
						// 		item.value = [300, 0, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
						// 		item.name = item.name;
						// 		Object.assign(item, basicForm);
						// 		linedata.push({
						// 			coords: [
						// 				[200, 150],
						// 				[300, 0]
						// 			]
						// 		});
						// 		// links.push({
						// 		// 	source: '数据中心',
						// 		// 	target: item.name
						// 		// });
						// 	}
						// });
						this.data = ondata;
					} else {
						this.data.forEach((item, index) => {
							if (this.data.length == 2) {
								if (index != 0 && index != 1) {
									item.value = [300, 0, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
									item.name = item.succahName;
									Object.assign(item, basicForm);
									linedata.push({
										coords: [
											[200, 150],
											[300, 0]
										]
									});
									links.push({
										source: '数据中心',
										target: item.name
									});
								}
							}
							if (this.data.length == 3) {
								if (index != 0 && index != 1) {
									item.value = [300, 0, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
									item.name = item.succahName;
									Object.assign(item, basicForm);
									linedata.push({
										coords: [
											[200, 150],
											[300, 0]
										]
									});
									links.push({
										source: '数据中心',
										target: item.name
									});
								}
							}
							if (this.data.length == 4) {
								two.forEach((litem, lindex) => {
									if (index != 0 && index != 1 && lindex == index - 2) {
										item.value = [...litem, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
										item.name = item.succahName;
										Object.assign(item, basicForm);
										linedata.push({
											coords: [[200, 250], [...litem]]
										});
										links.push({
											source: '数据中心',
											target: item.name
										});
									}
								});
							}
							if (this.data.length == 5) {
								three.forEach((litem, lindex) => {
									if (index != 0 && index != 1 && lindex == index - 2) {
										item.value = [...litem, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
										item.name = item.succahName;
										Object.assign(item, basicForm);
										linedata.push({
											coords: [[200, 250], [...litem]]
										});
										links.push({
											source: '数据中心',
											target: item.name
										});
									}
								});
							}
							if (this.data.length == 6) {
								four.forEach((litem, lindex) => {
									if (index != 0 && index != 1 && lindex == index - 2) {
										item.value = [...litem, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
										item.name = item.succahName;
										Object.assign(item, basicForm);
										linedata.push({
											coords: [[200, 250], [...litem]]
										});
										links.push({
											source: '数据中心',
											target: item.name
										});
									}
								});
							}
							if (this.data.length == 7) {
								five.forEach((litem, lindex) => {
									if (index != 0 && index != 1 && lindex == index - 2) {
										item.value = [...litem, item.inColumnCount || 0, item.avgAgeDays || 0, item.avgWeight || 0];
										item.name = item.succahName;
										Object.assign(item, basicForm);
										linedata.push({
											coords: [[200, 250], [...litem]]
										});
										links.push({
											source: '数据中心',
											target: item.name
										});
									}
								});
							}
							console.log(item.value);
						});
					}
					console.log('-----------', this.data, links);
					this.option.series[0].data = this.data;
					this.option.series[0].links = links;
					this.bankchat.setOption(this.option);
				}
			});

			// this.option.series[1].data = linedata;
		}
	}
};
</script>

<style scoped lang="less">
.table {
	width: 100%;
	height: 100%;
	canvas {
		width: 100% !important;
		height: 100% !important;
	}
}
</style>
